import React, { Component } from 'react'
import { Card,Form, Input, Button,Upload, message  } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import { updateArt, getArt } from 'api'
import E from 'wangeditor'
export default class ArtAdd extends Component {
  constructor(){
    super();
    this.state = {
      thumb:'',
      editor:null,
      art: {
        
      }
    }
  }
  render() {
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const tailLayout = {
      wrapperCol: { offset: 4, span: 20 },
    };
    const _this = this;
    const props = {
      name: 'thumb', // 上传的文件 字段名
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',//接口地址
      headers: { // 头部的token
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
         // console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 上传成功`);
          const url = info.file.response.url
          _this.setState({
            thumb: url
          })
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败`);
        }
      },
    };
    return (
      <Card title="修改文章">
       {
         this.state.art.id 
         &&
         <Form
              style={{maxWidth:800}}
               {...layout}
               initialValues = { this.state.art }
               name="basic"
               onFinish={this.submitForm}
             >
               <Form.Item
                 label="标题"
                 name="title"
                 rules={[
                   { required: true, message: '这个必须要写哦，不要搞事情!' }
                   ]}
               >
                 <Input />
               </Form.Item>
               <Form.Item
                 label="作者"
                 name="author"
                 rules={[
                   { required: true, message: '这个必须要写哦，不要搞事情!' }
                   ]}
               >
                 <Input />
               </Form.Item>
               <Form.Item
                 label="上传文章封面"
               >
                   <Upload {...props}>
                     <Button icon={<UploadOutlined />}>Click to Upload</Button>
                   </Upload>,
               </Form.Item>
               <Form.Item
                 label="描述"
                 name="desc"
               >
                 <Input.TextArea  />
               </Form.Item>
              <Form.Item
                label="内容"
              >
               <div id="editor"/>
              </Form.Item>
               <Form.Item {...tailLayout}>
                 <Button type="primary" htmlType="submit">
                   提交
                 </Button>
               </Form.Item>
             </Form>
       }
      </Card>
    )
  }
  componentDidMount(){
    
    this.fetchArt()
  }
  fetchArt = ()=>{
    // 获取文章详情
    const {artId} = this.props.match.params
    getArt(artId).then(res=>{
      if(res.data.code === 200) {
        this.setState({
          art: res.data.data
        },()=>{
          this.initEditor()
        })
      }
    })
  }
  initEditor = ()=>{
    const editor = new E('#editor')
      // 或者 const editor = new E(document.getElementById('div1'))
     editor.create()
     // 设置 富文本初始值
     editor.txt.html(this.state.art.content)
     this.setState({
       editor
     })
  }
  submitForm = (params)=>{
    // 提交表单
   
   params = {
     ...params,
     id:this.state.art.id,
     thumb: this.state.thumb||this.state.art.thumb,
     content: this.state.editor.txt.html()
   }
  
   updateArt(params).then(res=>{
     if(res.data.code === 200){
       message.success(res.data.msg,2,()=>{
         this.props.history.go(-1)
       })
       
     }
   }) 
  }
}
